<template>
  <div class="wrap">
    <div class="main">
      <div class="title">详情</div>
      <img :src="detail.image" alt class="img" mode="aspectFill" />
      <div class="name">
        <span class="dd">当当自营</span>
        {{detail.name}}
      </div>
      <div class="intro">{{detail.desc}}</div>
      <div class="discountPrice">
        <span>￥{{detail.price}}</span>
        <span>(9.48折)</span>
        <span>降价通知</span>
      </div>
      <div class="originalPrice">
        定价
        <span>{{detail.old_price}}</span>
      </div>
    </div>
    <div class="bottom">
      <div class="shop">店铺</div>
      <div class="cart" @click="cart">购物车</div>
      <div class="buy">立即购买</div>
      <div class="join" @click="addcart(detail.id)">加入购物车</div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      //获取的id一样的内容
      detail: {}
    };
  },

  methods: {
    //    读取购物车里面的内容.
    addcart(id) {
      var cart = wx.getStorageSync("cart") || [];
      // 检查此商品在购物车是否存在
      var index = cart.findIndex(item => {
        return item.id == id;
      });
      this.detail.checked = true  //购物车中的商品。默认选中
      if (index == -1) {
        //    不存在购物车
        this.detail.count = 1
        cart.push(this.detail);
        wx.setStorageSync("cart", cart);
      } else {
        //    存在购物车
        
        cart[index].count += 1;
        wx.setStorageSync("cart", cart);
        wx.showToast({
           title:"成功添加"
       })
      }
    },
   //进入购物车
   cart(){
       wx.switchTab({
           url:'/pages/shopp/main'
       })
   }
  },

  created() {},
  onLoad(e) {
    //    console.log(e)
    //获取点击过来的id
    var id = e.id;
    wx.request({
      url: "http://127.0.0.1:8080/book.json",
      success: res => {
        //    console.log(res)
        var list = res.data;
        var detail = list.find(item => {
          //    点击过来的id=数据请求过来的id
          return item.id == id;
        });
        this.detail = detail;
      },
      fail: err => {
        console.log(err);
      }
    });
  }
};
</script>
<style scoped>
.wrap {
  width: 750rpx;
  /* border: 1rpx solid black; */
}
.main {
  margin-bottom: 200rpx;
}
.title {
  width: 750rpx;
  height: 80rpx;
  font-size: 37rpx;
  line-height: 80rpx;
  text-align: center;
  border-bottom: 1rpx solid #ccc;
}
.img {
  width: 750rpx;
  height: 740rpx;
  border: 1rpx solid #ccc;
}
.name {
  width: 750rpx;
  height: 46rpx;
  border-top: #ccc;
  font-size: 27rpx;
}
.name .dd {
  width: 108rpx;
  height: 31rpx;
  border: 1rpx solid #f32330;
  color: #f32330;
  font-size: 25rpx;
  margin: 0 10rpx;
}
.intro {
  width: 750rpx;
  height: 110rpx;
  /* border: 1rpx solid firebrick; */
  font-size: 24rpx;
  overflow: hidden;
  text-overflow: ellipsis;
  color: #a3a5b2;
}
.discountPrice {
  width: 750rpx;
  height: 55rpx;
  /* border: 1rpx solid forestgreen; */
}
.discountPrice span:nth-child(1) {
  color: red;
  margin: 0 10rpx;
}
.discountPrice span:nth-child(2) {
  font-size: 25rpx;
  color: #a3a5b2;
  margin-right: 10rpx;
}
.discountPrice span:nth-child(3) {
  width: 16rpx;
  height: 52rpx;
  border: 1rpx solid #a3a5b2;
  border-radius: 20rpx;
  color: #a3a5b2;
  font-size: 26rpx;
  padding: 2rpx;
}
.originalPrice {
  width: 750rpx;
  height: 43rpx;
  /* border: 1rpx solid fuchsia; */
  color: #a3a5b2;
  font-size: 25rpx;
  margin-left: 10rpx;
}
.originalPrice span {
  text-decoration: line-through;
}
.bottom {
  width: 750rpx;
  height: 109rpx;
  line-height: 109rpx;
  display: flex;
  position: fixed;
  left: 0;
  bottom: 0;
  z-index: 999;
}
.shop {
  width: 108rpx;
  height: 109rpx;
  /* border: 1rpx solid violet; */
  text-align: center;
}
.cart {
  width: 201rpx;
  height: 109rpx;
  /* border: 1rpx solid violet; */
  text-align: center;
}
.buy {
  width: 219rpx;
  height: 109rpx;
  background-color: #ffbe24;
  text-align: center;
}
.join {
  width: 219rpx;
  height: 109rpx;
  background-color: #f3554a;
  text-align: center;
}
</style>